<template lang="html">
  <div class="noticelist">
    <div class="breadNav">
      <el-breadcrumb separator="/" class="">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>通知公告</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="ntslistMenu">
      <el-row style="overflow:hidden">
        <el-col :span="19"><div class="grid-content"><el-button type="primary">添加公告</el-button></div></el-col>
        <el-col :span="5">
          <div class="grid-content">
            <el-input
              placeholder="请输入搜索内容"
              icon="search"
              v-model="input2" :on-icon-click="handleIconClick">
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-row style="overflow:hidden">
        <el-col :span="24">
          <template>
          <el-table
            :data="list"
            border
            style="width: 100%">
            <el-table-column
              label="标题内容" prop="name" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="发布时间"
              width="180">
              <template scope="scope">
                <el-icon name="time"></el-icon>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template scope="scope">
                <el-button
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        </el-col>
      </el-row>
      <div style="margin-top: 20px">
        <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage4"
           :page-sizes="[10, 15, 20]"
           :page-size="10"
           layout="total, sizes, prev, pager, next, jumper"
           :total="1000" style="float:right;margin-top:5px">
         </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'noticelist',
  data(){
    return{
      breadtitle:'',
      list: [{
          date: '2016-05-02',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        }, {
          date: '2016-05-04',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        }, {
          date: '2016-05-01',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        }, {
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        },{
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        },{
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        },{
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        },{
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        },{
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        },{
          date: '2016-05-03',
          name: '热付通平台为了惠及百姓，协同供热企业联手'
        }],
      input2:'',
      currentPage4: 1
    }
  },
  methods:{
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },
  created(){

  }
}
</script>

<style lang="css">
.ntslistMenu{
 padding:0 20px 20px 20px;
}

</style>
